<template>
  <ProTable
    ref="tableRef"
    :fetchListApi="fetchListApi"
    :columns="columns"
    row-key="infoId"
  >
    <template #toolbars>
      <Row class="w-full mr-3">
        <Col :span="16"> </Col>
        <Col :span="8" class="text-right content-center">
          <Space>
            <!-- <b-button
          :icon="h(UnlockOutlined)"
          @click="onUnlock"
          :disabled="selectRows.length != 1"
          >解锁</b-button
        > -->
            <b-button
              icon="export"
              @click="onExport"
              code="monitor:logininfor:export"
              >导出</b-button
            >
          </Space>
        </Col>
      </Row>
    </template>
  </ProTable>
</template>

<script setup lang="tsx">
import { computed, h, ref } from 'vue';
import { UnlockOutlined } from '@ant-design/icons-vue';
import { Col, Modal, Row, Space, Tag, message } from 'ant-design-vue';
import dayjs from 'dayjs';
import { ProTable, ProTableProps } from '@/components/ProTable/index';
import { download, listToEnum } from '@/utils/utils';
import { fetchCommonStatusDict } from '@/api/dict';
import {
  exportLoginLogs,
  fetchLoginLogs,
  unlockLogininfor,
} from '@/api/notice';

const tableRef = ref();

const fetchListApi = async (_params: any) => {
  const { loginTime = [], ...params } = _params;

  if (loginTime && loginTime.length) {
    const [beginTime, endTime] = loginTime;
    Object.assign(params, {
      params: { beginTime, endTime },
    });
  }
  return fetchLoginLogs({
    ...params,
  });
};

const commonStatusEnum = ref<Record<string, any>>();

const init = () => {
  fetchCommonStatusDict().then((res) => {
    commonStatusEnum.value = listToEnum(
      res.data as any,
      'dictValue',
      'dictLabel',
    );
  });
};

init();

// const selectRows = ref<any[]>([]);
// const rowSelection = ref<ProTableProps['rowSelection']>({
//   onChange(values, selectedRows) {
//     selectRows.value = selectedRows;
//   },
// });

const onExport = async () => {
  const res = await exportLoginLogs();
  download(
    res as unknown as Blob,
    `logininfor_${dayjs().format('YYYY-MM-DD HH:mm:ss')}.xlsx`,
  );
};

const columns = computed<ProTableProps['columns']>(() => [
  {
    title: '访问编号',
    dataIndex: 'infoId',
    hideInSearch: true,
    width: 100,
  },
  {
    title: '用户名称',
    dataIndex: 'userName',
  },
  {
    title: '登录地址',
    dataIndex: 'ipaddr',
    width: 120,
  },
  {
    title: '登录地点',
    dataIndex: 'loginLocation',
    hideInSearch: true,
  },
  {
    title: '浏览器',
    dataIndex: 'browser',
    hideInSearch: true,
    width: 120,
  },
  {
    title: '操作系统',
    dataIndex: 'os',
    hideInSearch: true,
    width: 120,
  },
  {
    title: '登录状态',
    dataIndex: 'status',
    width: 80,
    valueEnum: {
      ...commonStatusEnum.value,
    },
    customRender({ text }) {
      return (
        <Tag color={text === '0' ? 'success' : 'error'}>
          {
            commonStatusEnum.value?.[
              text as keyof typeof commonStatusEnum.value
            ]
          }
        </Tag>
      );
    },
  },
  {
    title: '操作信息',
    dataIndex: 'msg',
    hideInSearch: true,
  },
  {
    title: '登录时间',
    isTime: true,
    dataIndex: 'loginTime',
    width: 150,
  },
]);

const onUnlock = () => {
  console.log(selectRows.value);
  const username = selectRows.value[0].userName;
  Modal.confirm({
    title: '系统提示',
    centered: true,
    content: `是否确认解锁用户"${username}"数据项?`,
    onOk: async () => {
      await unlockLogininfor(username);
      tableRef.value.refresh();
      message.success('操作成功');
    },
  });
};
</script>
